'use client'

export default function StrengthsWeaknesses() {
  const strengths = [
    'Anchor utility deployment with TNB after multi-year pilots; clear painkiller ROI vs. key-room ops and theft.',
    'Purpose-built, utility-grade biometric padlock + cloud platform; patents and compliance roadmap differentiate.',
    'Strategic advisors/investors (e.g., Michele Romanow) that can accelerate enterprise go-to-market and trust-building.'
  ]

  const weaknesses = [
    'Security credibility and compliance: prior FTC settlement (2020) requires demonstrable, audited maturity.',
    'Execution at scale: firmware reliability, battery life, environmental resilience, and manufacturing ramp risk.',
    'Concentration and geopolitical exposure: TNB and SEA public-sector cycles; incumbents can bundle and displace.'
  ]

  return (
    <div className="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 text-gray-200">
      {/* Strengths */}
      <div className="strengths-weaknesses-card p-[16px]">
        <h3 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-4 pb-2 border-b border-[#2b3142]">
          Strengths
        </h3>

        <ul className="space-y-4">
          {strengths.map((text, i) => (
            <li key={i} className="flex items-start gap-3">
              <span className="flex items-center justify-center w-6 h-6 rounded-md bg-[#122b18] text-[#00ff84] text-lg leading-none">
                ✓
              </span>
              <span className="text-gray-300 leading-relaxed">{text}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Weaknesses */}
      <div className="strengths-weaknesses-card p-[16px]">
        <h3 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-4 pb-2 border-b border-[#2b3142]">
          Weaknesses / Key Risks
        </h3>

        <ul className="space-y-4">
          {weaknesses.map((text, i) => (
            <li key={i} className="flex items-start gap-3">
              <span className="flex items-center justify-center w-6 h-6 rounded-md bg-[#2b1e1e] text-[#ffcc00] text-lg leading-none">
                ⚠️
              </span>
              <span className="text-gray-300 leading-relaxed">{text}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
